<template>
  <div class="wrapper flex flex-direction-column">
    <div class="flex-1">
      <div class="input">
        <div class="input-title">个人信息</div>
        <van-cell
          center
          title="您的姓名"
          :value="details.name"
        />
        <van-cell
          center
          title="性别"
          :value="sex[details.sex]"
        />
        <van-cell
          center
          title="年龄"
          :value="details.age"
        />
        <van-cell
          center
          title="电话"
          :value="details.phone"
        />
        <van-cell
          center
          title="兴趣爱好"
          :value="details.hobby"
        />
        <van-cell
          center
          title="QQ"
          :value="details.qq"
        />
      </div>
    </div>
    <van-button
      type="info"
      size="normal"
      @click="editFn"
    >编辑信息</van-button>
    <!-- <van-button
      type="danger"
      size="normal"
      @click="delFn"
    >删除信息</van-button> -->
  </div>
</template>

<script>
import { Toast } from 'vant';
import xs from '@public/img/xs.gif'

import { skySelect, skyDelete } from '@/assets/api/home.js'
export default {
  components: {
  },
  props: {},
  data () {
    return {
      sex: {
        '1': '男',
        '2': '女'
      },
      id: '',
      details: {}
    };
  },
  created () { },
  methods: {
    matchFn () {
      skySelect({
        id: this.id
      }).then((res) => {
        console.log(res.data[0])
        if (res.success) {
          this.details = res.data[0]
          return
        }
        Toast({
          message: res.msg
        });
      })
    },
    editFn () {
      this.$router.push({ path: '/skyEdit', query: { id: this.id } })

    },
    delFn () {
      skyDelete({
        id: this.id
      }).then((res) => {
        if (res.success) {
          Toast({
            message: res.msg
          });

          this.$router.push({ path: '/home' })
          return
        }
        Toast({
          message: res.msg
        });
      })
    }
  },
  mounted () {
    this.id = this.$route.query.id
    this.matchFn();
  },
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  overflow: hidden;
  img {
    width: 100%;
  }
  .input {
    .input-title {
      width: 100%;
      text-align: center;
      font-size: 18px;
      padding: 20px 0;
    }
    .input-search {
      position: relative;
      border: 1px solid #d7d7d7;
      margin: 30px 20px;
      border-radius: 10px;
      overflow: hidden;
      .search-btn {
        padding: 0 20px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        height: initial;
      }
    }
    .match-btn {
      margin: 30px 20px;
    }
    .input-select {
      margin: 30px 20px;
    }
  }
  .sms-send {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #d7d7d7;
    padding: 10px 20px;
    .van-search__content {
      background: #fff;
    }
  }
  .sms-btn {
    color: #34a1ed;
  }
  .list {
    overflow: auto;
  }
  .footer-pd {
    padding: 30px;
  }
}
</style>
